<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-cmn">
<head>
    <title>用户查询</title>
    <%@include file="/WEB-INF/pages/header.jsp"%>
    <style>
        #userTable tr th{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">多条件查询</div>
        </div>
        <div class="panel-body">
            <form class="form-inline" id="condition" >
                <div class="form-group">
                    <label>用户名:</label>
                    <input type="text" class="form-control" name="userName">
                </div>
                <div class="form-group">
                    <label>登录名:</label>
                    <input type="text" class="form-control" name="loginName">
                </div>
                <div class="form-group">
                    <label>电话:</label>
                    <input type="text" class="form-control" name="mobileNo">
                </div>
                <button  type="button" class="btn btn-primary" onclick="search()">查询</button>
            </form>
        </div>
    </div>
    <div id="toolbar" style="margin-bottom:10px;">
        <button type="button" class="btn btn-primary" onclick="report('xls')"><i class="glyphicon glyphicon-export"></i>导入</button>
        <button type="button" class="btn btn-primary" onclick="report('xls')"><i class="glyphicon glyphicon-export"></i>导出Excel</button>
        <button type="button" class="btn btn-primary" onclick="report('pdf')"><i class="glyphicon glyphicon-eye-open"></i>打印预览</button>
        <button type="button" class="btn btn-primary" onclick="grant()"><i class="glyphicon glyphicon-grain"></i>用户授权</button>
        <a class="btn btn-success" onclick="addUserInfo()"><i class="glyphicon glyphicon-plus"></i>&nbsp;添加用户</a>
    </div>
    <table data-toggle="table" class="text-center"
           data-striped="true"
           data-url="${ctx}/sys/user/searchByCondition"
           id="userTable"
           data-pagination="true"
           data-side-pagination="server"
           data-page-size="8">
        <thead>
            <tr>
                <th data-checkbox="true"></th>
                <th data-field="userId">编号</th>
                <th data-field="loginName">登录名</th>
                <th data-field="userName">用户名</th>
                <th data-field="gender" data-formatter="formatGender">性别</th>
                <th data-field="mobileNo">电话</th>
                <th data-field="birthday">生日</th>
                <th data-field="birthday" data-formatter="formatAge">年龄(周岁)</th>
                <th data-field="address">地址</th>
                <th data-field="createTime">创建时间</th>
                <th data-field="roleLabel">角色</th>
                <th data-field="state" data-formatter="formatState">状态</th>
                <th data-formatter="formatOption" data-events="optEvents">操作</th>
            </tr>
        </thead>

    </table>
</div>
<%--用户给角色授权--%>
<div id="grant">
    <table id="roleTable"
        data-url="${ctx}/sys/role/searchRole"
        data-toggle="table"
    >
        <thead>
            <tr>
                <th data-radio="true"></th>
                <th data-field="roleId">角色编号</th>
                <th data-field="roleName">英文名称</th>
                <th data-field="roleLabel">中文名称</th>
                <th data-field="createTime">创建时间</th>
                <th data-field="state" data-formatter="formatState">状态</th>
            </tr>
        </thead>
    </table>
</div>

<%--添加用户--%>
<div id="addUserInfo">
    <form class="form-horizontal" id="addUserInfo_form">
        <div class="form-group">
            <label class="col-md-3 control-label">登录名：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="loginName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">用户名：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="userName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">密码：</label>
            <div class="col-md-8">
                <input type="password" class="form-control" name="password">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">确认密码：</label>
            <div class="col-md-8">
                <input type="password" class="form-control" id="repassword">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">性别：</label>
            <div class="col-md-8">
                <label class="radio-inline">
                    <input type="radio" name="gender" checked="checked" value="1">男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender" value="0">女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">电话：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="mobileNo">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">生日：</label>
            <div class="col-md-8">
                <input type="date" class="form-control" name="birthday">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">地址：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="address">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">角色：</label>
            <div class="col-md-4">
                <select name="roleId" class="form-control">
                    <option value="-1">--请选择角色--</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">角色状态：</label>
            <div class="col-md-8">
                <label class="radio-inline" for="nan">
                    <input type="radio" name="state" id="nan" checked="checked" value="1">启用
                </label>
                <label class="radio-inline" for="nv">
                    <input type="radio" name="state" id="nv" value="0">禁用
                </label>
            </div>
        </div>
    </form>
</div>


<%--修改用户--%>
<div id="updateUserInfo">
    <form class="form-horizontal" id="updateUserInfo_form">
        <input type="hidden" name="userId"/>
        <div class="form-group">
            <label class="col-md-3 control-label">登录名：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="loginName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">用户名：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="userName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">性别：</label>
            <div class="col-md-8">
                <label class="radio-inline">
                    <input type="radio" name="gender" checked="checked" value="1">男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender" value="0">女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">电话：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="mobileNo">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">生日：</label>
            <div class="col-md-8">
                <input type="date" class="form-control" name="birthday">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">地址：</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="address">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">角色：</label>
            <div class="col-md-4">
                <select name="roleId" class="form-control">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">创建时间:</label>
            <div class="col-md-7">
                <input type="text" id="createTime" readonly="readonly"  class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">角色状态：</label>
            <div class="col-md-8">
                <label class="radio-inline" for="nan1">
                    <input type="radio" name="state" id="nan1" checked="checked" value="1">启用
                </label>
                <label class="radio-inline" for="nv1">
                    <input type="radio" name="state" id="nv1" value="0">禁用
                </label>
            </div>
        </div>
    </form>
</div>

    <%@include file="/WEB-INF/pages/footer.jsp"%>
    <script src="${ctx}/res/js/user.js"></script>
<script>
    function report(fmt){
        var obj='';
        var str = "";
        $.ajax({
            url: ctx + "/sys/role/searchRole",
            data: null,
            dataType: "json",
            async: false,
            success: function (roleList) {
               $(roleList).each(function(){
                   str += this.roleId+":\'"+this.roleLabel+"\',";
               });
            }

        });
        obj='{'+str.substring(0,str.length-1)+'}';
        obj = eval("(" + obj + ")");
        swal({
            title:'导出用户信息',
            text:'请选择导出的角色',
            input:'select',
            inputOptions:obj,
            confirmButtonText:'确定'
        }).then(function(roleId){
            location=ctx+'/sys/user/report?fmt='+fmt+'&roleId='+roleId;
        });
    }
</script>
</body>
</html>
